<template>
	<view>
		<navigationbar :title="title" :bgColor="navigationbarBgColor" />
		<view class="postList">
			<view class="name">
				<text>{{ postInfo.name }}</text>
				<text>{{ postInfo.salary }}</text>
			</view>
			<view class="location">
				<text class="iconfont icon-tongyong-didian">{{ postInfo.postinfo.location }}</text>
				<text class="iconfont icon-bangongbao">{{ postInfo.postinfo.category }}</text>
				<text class="iconfont icon-xueli">{{ postInfo.postinfo.education }}</text>
			</view>
			<view class="recruiterInfo">
				<image :src="postInfo.recruitment.icon" mode=""></image>
				<view class="hrName">
					<text>{{ postInfo.recruitment.name }}</text>
					<text>{{ postInfo.recruitment.company }} · {{ postInfo.recruitment.position }}</text>
				</view>
			</view>
			<view class="postIntroduction">
				<text>职位详情</text>
				<view class="container">
					<u-read-more :showHeight="600"><rich-text :nodes="postInfo.description"></rich-text></u-read-more>
				</view>
				<view class="labelContainer">
					<text :key="index" v-for="(item, index) in postInfo.title" class="label">{{ item }}</text>
				</view>
			</view>
			<view class="companyInfo">
				<image class="trademark" :src="postInfo.company.icon" mode=""></image>
				<view class="companyName">
					<text>{{ postInfo.company.name }}</text>
					<text>{{ postInfo.company.category }} · {{ postInfo.company.financing }} · {{ postInfo.company.scale }}人</text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="sc" @click="collection">
				<text :class="icon"></text>
				<text>{{ text }}</text>
			</view>
			<view class="btnContainer"><u-button text="立即沟通" size="large" :color="bgColor" shape="circle" @click="toMessage"></u-button></view>
		</view>
		<u-popup :round="10" :mode="center" :show="show" :closeable="true" @close="close">
			<view class="content">
				<text>该功能需要登录</text>
				<view class="btn"><u-button type="primary" text="去登录" @click="toUser"></u-button></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import navigationbar from '../navigationBar.vue';
import { mapState } from 'vuex';
export default {
	components: {
		navigationbar
	},
	computed: {
		...mapState(['userID', 'postInfo', 'userInfo'])
	},
	data() {
		return {
			center: 'center',
			icon: 'iconfont icon-shoucangxiao',
			title: '职位详情',
			navigationbarBgColor: '#ffffff',
			bgColor: 'rgb(122,175,254)',
			show: false,
			list: '',
			text: '收藏',
			status: false
		};
	},
	onShow() {
		this.list = this.userInfo.collection_list;
		if (this.list && this.list.includes(this.postInfo._id)) {
			this.icon = 'iconfont icon-shoucangxuanzhong';
			this.text = '已收藏';
			this.status = true;
		}
		console.log(this.postInfo);
	},
	methods: {
		getUserInfo() {
			uniCloud.callFunction({
				name: 'getUserInfo',
				data: {
					id: this.$store.state.userID
				},
				success: res => {
					this.$store.commit('setUserInfo', res.result.data);
				}
			});
		},
		collection() {
			if (!this.$store.state.userID) {
				this.show = true;
				return;
			}
			let userID = this.userID;
			let postID = this.postInfo._id;
			if (this.status) {
				let arrData = this.list.filter(item => {
					return item !== postID;
				});
				this.icon = 'iconfont icon-shoucangxiao';
				this.text = '收藏';
				this.status = false;
				uniCloud.callFunction({
					name: 'updateCollctionList',
					data: {
						userID,
						arrData
					},
					success: () => {
						this.getUserInfo();
					}
				});
			} else {
				let arrData = this.$store.state.userInfo.collection_list;
				arrData.push(postID);
				this.icon = 'iconfont icon-shoucangxuanzhong';
				this.text = '已收藏';
				this.status = true;
				uniCloud.callFunction({
					name: 'updateCollctionList',
					data: {
						userID,
						arrData
					},
					success: res => {
						this.getUserInfo();
					}
				});
			}
		},
		toUser() {
			uni.switchTab({
				url: '../user/user'
			});
		},
		toMessage() {
			if (!this.$store.state.userID) {
				this.show = true;
				return;
			}
			let date = new Date();
			uniCloud.callFunction({
				name: 'createMsgData',
				data: {
					from_uid: this.userID,
					to_uid: this.postInfo._id,
					from_info: this.userInfo,
					to_info: this.postInfo,
					body: [
						{
							type: 'text',
							content: '您好',
							date: '1651550835',
							role: 1
						}
					],
					create_date: `${date.getMonth() + 1}月${date.getDate()}日`
				},
				success:(res) => {
					this.$store.commit('setCurrentMsg', res.result)
					uni.navigateTo({
						url: '../message/messageDetail/messageDetail'
					})
				}
			});
		},
		close() {
			this.show = false;
		}
	}
};
</script>

<style lang="scss">
$linecolor: rgb(225, 225, 225);

.postList {
	padding: 0 40rpx;

	.name {
		font-size: 45rpx;
		margin-top: 50rpx;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
		align-items: center;

		& text:nth-of-type(2) {
			color: $color;
			font-size: 38rpx;
			white-space: nowrap;
			overflow: hidden;
		}

		& text:first-of-type {
			max-width: 65%;
			font-weight: bold;
		}
	}

	.location {
		margin-top: 10rpx;

		& text {
			margin-right: 25rpx;
			font-size: 30rpx;
		}
	}

	.recruiterInfo {
		margin: 50rpx 0;
		padding: 40rpx 0;
		border-top: solid 1rpx $linecolor;
		border-bottom: solid 1rpx $linecolor;
		display: flex;
		flex-flow: row;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
		}

		.hrName {
			margin-left: 30rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			font-size: 40rpx;
			& text:first-of-type {
				font-weight: bold;
			}
			& text:nth-of-type(2) {
				margin-top: 10rpx;
				font-size: 32rpx;
			}
		}
	}
	.companyInfo {
		margin: 50rpx 0;
		padding: 40rpx 0;
		border-top: solid 1rpx $linecolor;
		display: flex;
		flex-flow: row;
		margin-bottom: 140rpx;
		.trademark {
			width: 100rpx;
			height: 100rpx;
			border-radius: 20rpx;
		}
		.companyName {
			margin-left: 30rpx;
			display: flex;
			flex-flow: column;
			justify-content: center;
			font-size: 36rpx;
			& text:nth-of-type(2) {
				margin-top: 10rpx;
				font-size: 30rpx;
			}
		}
	}
	.postIntroduction {
		font-size: 40rpx;
		& > text:first-of-type {
			font-weight: bold;
		}
		.container {
			margin-top: 20rpx;
		}
		.labelContainer {
			margin: 20rpx 0;
			padding: 5rpx 10rpx;
			.label {
				font-size: 27rpx;
				background-color: rgb(236, 236, 236);
				margin-right: 10rpx;
				padding: 10rpx;
				border-radius: 15rpx;
			}
		}
	}
}

.footer {
	position: fixed;
	bottom: 0;
	height: 140rpx;
	width: 100%;
	display: flex;
	flex-flow: row;
	align-items: center;
	justify-content: space-around;
	background-color: white;
	border-top: solid 1rpx $linecolor;
	.sc {
		display: flex;
		flex-flow: column;
		align-items: center;
		& text:first-of-type {
			font-size: 50rpx;
		}
		& text:nth-of-type(2) {
			font-size: 25rpx;
		}
	}
	.btnContainer {
		width: 60%;
	}
}
.content {
	width: 400rpx;
	height: 200rpx;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: space-around;
	text {
		margin-top: 20rpx;
	}
	.btn {
		width: 50%;
	}
}
</style>
